<template>
  <div>
    <el-card class='box-card'>
      <div slot='header' class='clearfix'>
        <el-row :gutter='10' style='display: flex;align-items: center;'>
          <el-col :span='6'>
            <h3>搜索用户 '{{ params.searchKey }}' 所有结果</h3>
          </el-col>
        </el-row>
      </div>
      <div v-if='users.length'>
        <el-row
          v-for='(item, index) in users'
          :key='index'
          :gutter='10'
          style='
              margin-bottom: 20px;
              padding-bottom: 20px;
              border-bottom: 1px solid rgba(140,147,157,0.29);'
        >
          <el-col :span='1'>
            <el-avatar :src='item.avatar' />
          </el-col>
          <el-col :span='10' style='margin-left: 20px;'>
            <div>
              <p style='display: flex; align-items: center;'>
                <strong>{{ item.userName }}</strong>
                <el-tag
                  v-if='item.isAdmin'
                  style='font-size: 12px;'
                  type='danger'
                  effect='plain'
                  size='small'
                >
                  管理员
                </el-tag>
              </p>
              <p><span>{{ item.introduction || '该用户没有留下简介信息...' }}</span></p>
            </div>
          </el-col>
          <el-col :span='2' :offset='11'>
            <el-button type='danger' @click='switchAttention(item)'>
              <span class='iconfont' :class="item.isAttention?'close':'add'"> {{ item.isAttention ? '取关' : '关注'
                }}</span>
            </el-button>
          </el-col>
        </el-row>
      </div>
      <div v-else>
        <el-empty description='没有搜索到相关用户！' />
      </div>
    </el-card>
    <el-pagination
      v-if='total > params.limit'
      layout='prev, pager, next'
      :total='total'
      :page-size='params.limit'
      @current-change='changePage'
    />
  </div>
</template>

<script>

import UserDetailService from '@/service/users/UserDetailService'

export default {
  name: 'UserSearched',
  data() {
    return {
      userData: JSON.parse(sessionStorage.getItem('userData')),
      users: [],
      params: {
        limit: 10,
        offset: 0,
        searchKey: ''
      },
      total: 0
    }
  },
  created() {
    this.params.searchKey = this.$route.params.searchKey
    this.searchUser()
  },
  methods: {
    // 初始化数据
    async searchUser() {
      const res = await UserDetailService.getUsers(this.params)
      if (res.data.status !== 200) return false
      this.total = res.data.data.total
      if (!this.userData) {
        res.data.data.userPage.forEach(user => {
          user.isAttention = false
        })
      } else {
        res.data.data.userPage.forEach(user => {
          user.isAttention = this.userData.userDetails.attentions.includes(user._id)
        })
      }

      this.users = res.data.data.userPage
    },

    changePage(page) {
      this.params.offset = (page - 1) * this.params.limit
      this.searchUser()
    },

    // 关注和取关
    async switchAttention(user) {
      if (user.isAttention) {
        // 发起请求 取关作者
        const res = await UserDetailService.unAttention(user._id)

        if (res.data.status !== 200) {
          return this.$message.error(res.data.message  + ' ！请先登录！')
        }
        // 更新本地 sessionStorage 用户数据
        this.userData.userDetails.attentions.splice(
          this.userData.userDetails.attentions.indexOf(user._id),
          1
        )
        sessionStorage.setItem('userData', JSON.stringify(this.userData))
        this.$message.success(res.data.message)
        user.isAttention = false


      } else {
        // 发起请求 关注作者
        const res = await UserDetailService.setAttention({ userId: user._id })

        if (res.data.status !== 200) {
          return this.$message.error(res.data.message + ' ！请先登录！')
        }
        // 更新本地 sessionStorage 用户数据
        this.userData.userDetails.attentions.push(user._id)
        sessionStorage.setItem('userData', JSON.stringify(this.userData))
        this.$message.success(res.data.message)
        user.isAttention = true

      }
    }
  }
}
</script>

<style scoped>
i.el-input__icon {
  cursor: pointer;
  font-size: 20px;
}

i.el-input__icon:hover {
  color: #409EFF;
}

h3 {
  margin: 0;
  line-height: 1.5;
}

>>> .el-input__inner {
  border-radius: 36px;
}

.el-avatar {
  width: 60px;
  height: 60px;
}

.el-row {
  display: flex;
  align-items: center;
}

p {
  margin: 0;
  padding: 0;
}

p > strong {
  display: inline-block;
  margin-right: 10px;
  color: #e3487b;
  line-height: 1.5;
}

p > span {
  font-size: 14px;
  color: #8c939d;
}
</style>

